<template>
  <van-popup
    round
    safe-area-inset-top
    safe-area-inset-bottom
    v-model:show="show"
    position="bottom"
    closeable
    transition-appear
    :style="{ height: '80%' }"
    class="popouBox"
  >
    <div class="title">
      {{ title }}
    </div>
    <van-search
      v-model="queryParams[props.searchKey]"
      shape="round"
      background="#ddd"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <van-button size="small" @click="onRefresh" type="primary"
          >搜 索</van-button
        >
      </template>
    </van-search>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="50"
    >
      <div
        class="tableRow"
        @click="selectItemFun(item, index)"
        v-for="(item, index) in tabList"
        :key="item.ID"
      >
        <div class="flex" style="max-width: 90%">
          <div v-if="props.showCode" class="rowCode overShow">
            {{ item.Code }} ·&nbsp;
          </div>
          <div class="rowName overShow">{{ item.Name }}</div>
        </div>

        <div class="select">
          <div v-show="activeIndex == index">
            <van-icon name="checked" color="#1989fa" size="24" />
          </div>
          <div v-show="activeIndex != index">
            <div class="circle"></div>
          </div>
        </div>
      </div>
      <div style="height: 64px"></div>
      <div class="footer">
        <div @click="show = false">
          <van-button round style="width: 150px" plain type="primary"
            >取消</van-button
          >
        </div>
        <div @click="confrimSelect">
          <van-button round style="width: 150px" type="primary"
            >确认</van-button
          >
        </div>
      </div>
    </van-list>
  </van-popup>
</template>

<script setup name="MyPopup">
import { GetDeviceDetail } from '@/api/teachDevice/account.js';
import { computed, getCurrentInstance, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
const route = useRoute();
const emit = defineEmits(['update:showPopup', 'getItem']);
const props = defineProps({
  showPopup: {
    default: false
  },
  title: {
    default: '设备'
  },
  showCode: {
    default: false
  },
  query: {
    default: {}
  },
  category: {
    default: '保养方案'
  },
  searchKey: {
    default: 'Code'
  }
});
const page = ref({
  PageIndex: 0,
  PageSize: 10
});
const activeIndex = ref(-1);
const loading = ref(false);
const finished = ref(false);
const searchValue = ref('');
const total = ref(0);
const selectItem = ref({});
const tabList = ref('');
const queryParams = ref({});
const show = computed({
  get: () => props.showPopup,
  set: val => {
    emit('update:showPopup', val);
  }
});
const onLoad = () => {
  console.log('触底');
  setTimeout(() => {
    page.value.PageIndex++;
    getList();
  }, 500);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  tabList.value = [];
  page.value.PageIndex = 0;
  loading.value = true;
  onLoad();
};
onMounted(() => {});

function confrimSelect() {
  emit('getItem', selectItem.value);
  show.value = false;
}

function selectItemFun(item, index) {
  selectItem.value = item;
  activeIndex.value = index;
}

async function init() {
  let query = {
    ...page.value,
    NoPage: '',
    ...props.query,
    ...queryParams.value
  };
  let list = [];
  let Total = 0;
  switch (props.category) {
    case '设备保养方案':
      let res = await GetDeviceDetail({ ID: props.query.ID, ...query });
      list = res.data.Maintain;
      list?.forEach(item => {
        item.Name =
          item.Name_MaintainPlan + '· ' + proxy.$filterUserName(item.Principal);
        item.Code = item.Code_MaintainPlan;
        item.State = res.data.Info.State;
        item.State_Self = res.data.Info.State_Self;
        item.Category = res.data.Info.Category;
        if (item.Type == 2) {
          item.Name =
            item.Interval +
            ' 分钟 · ' +
            proxy.$filterUserName(item.Principal) +
            '· ' +
            item.Remark;
          item.Code = '外校';
        }
      });

      Total = list?.length;
      break;
  }
  return {
    list,
    Total
  };
}

async function getList() {
  try {
    let { list, Total } = await init();
    console.log(list);
    tabList.value = list;
    total.vlaue = Total;
    loading.value = false;
    if (tabList.value.length >= total.value) {
      finished.value = true;
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.popouBox {
  position: relative;
  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // height: 40px;
    margin-bottom: 20px;
    padding-top: 10px;
    box-shadow: 0 -2px 2px #ddd;
  }
}
.tableRow {
  display: flex;
  justify-content: space-between;
  margin-top: 4rpx;
  align-items: center;
  padding: 0 10rpx;
  border-bottom: 1px solid #eee;
  height: 30rpx;
  line-height: 30rpx;
  .rowName {
    // width: 30%;
  }
  .circle {
    width: 23px;
    height: 23px;
    border: 1px solid #ddd;
    border-radius: 50%;
    // margin-right: 10rpx;
  }
  .select {
    width: 30rpx;
    justify-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.title {
  text-align: center;
  height: 50rpx;
  line-height: 50rpx;
}
:deep(.van-search__action) {
  padding: 0;
  line-height: unset;
  margin: 0 10px;
}
</style>
